<template>
  <view>
    <!-- 搜索输入框 -->
    <view class="search-box">
      <uni-search-bar @input="input" placeholder="请输入搜索内容" radius="18" bgColor="#ffffff" cancelButton="none"
        @clear="clear" :focus="true" v-model="searchValue">
      </uni-search-bar>
    </view>

    <!-- 搜索查询建议列表 -->
    <view class="search-list" v-if="searchValue">
      <view class="search-item" v-for="(item,index) in searchResults" :key="item.cat_id" @click="gotoSearchGood(item)">
        <view class="goods_name">{{item.goods_name}}</view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>

    <view class="search-history" v-else>
      <view class="histroy-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17" @click="clearAllTag"></uni-icons>
      </view>
      <view class="history-body">
        <uni-tag :inverted="true" :text="item" v-for="(item,index) in histories" :key="index" @click="searchkw(item)" />
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        //收集输入的信息
        searchValue: '',
        timer: null,
        //搜索空数组
        searchResults: [],
        //服务器返回的搜索总条数
        total: 0,
        //页数
        pageSize: 1,
        //搜索历史的数组
        searchList: [],
      };
    },
    computed: {
      histories() {
        return [...this.searchList].reverse()
      }
    },

    methods: {
      //e 是输入的最新值 进行防抖操作 (在500ms内，没有触发新的输入事件，则为关键词数据)
      //防抖：在一段时间内连续输入时，需要不断重新计时，直到在这段时间内没有连续输入才算
      input(e) {
        //每次触发先删除 延时器  
        clearTimeout(this.timer)
        //然后重新定义一个定时器 ，重新开始计时
        this.timer = setTimeout(() => {
          this.searchValue = e
          // console.log(this.searchValue)
          this.getSearchList()
        }, 500)
      },

      //清空数据
      clear() {
        this.searchResults = []
        this.total = 0
        this.pageSize = 1
      },

      //获取搜索列表数据
      async getSearchList() {
        //如果搜索数据为空
        if (!this.searchValue) return
        let {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', {
          query: this.searchValue
        })
        if (res.meta.status === 200) {
          this.searchResults = res.message.goods
          this.total = res.message.total
          this.pageSize = res.message.pagenum
        } else return uni.$showMsg()

        // 1. 将 Array 数组转化为 Set 对象
        const set = new Set(this.searchList)
        // 2. 调用 Set 对象的 delete 方法，移除对应的元素
        set.delete(this.searchValue)
        // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
        set.add(this.searchValue)
        // 4. 将 Set 对象转化为 Array 数组
        this.searchList = Array.from(set)

        // //把搜索关键词存入在搜索数组中  —— 要去重  不存在就添加
        // if (this.searchList.indexOf(this.searchValue) === -1)
        //   //计算属性翻转也行 
        //   //这样操作怎么实现遇到相同的搜索词，要把对应的搜索词放在最前面呢
        //   // this.searchList.unshift(this.searchValue)
        //   this.searchList.push(this.searchValue)
        // else  //如果遇到重复 —— 把它放在最前面
        //   let index = this.searchList.indexOf(this.searchValue)

        //然后本地持久化存储 同步方式
        uni.setStorageSync('storage_searchList', JSON.stringify(this.searchList))

      },
      //页面加载时
      onLoad() {
        //取出本地存储的数据
        this.searchList = JSON.parse(uni.getStorageSync('storage_searchList') || '[]')
      },

      //点击前往指定页面 -- 详情页
      gotoSearchGood(item) {
        uni.navigateTo({
          url: `/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`
        })
      },

      //点击tag标签 
      searchkw(item) {
        // this.searchValue = this.searchList[index];
        // this.getSearchList()
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?query=' + item
        })
      },

      //清空所有tag标签
      clearAllTag() {
        this.searchList = [],
          //清除本地存储
          uni.removeStorageSync('storage_searchList');
      },

    }
  }
</script>

<style lang="scss">
  .search-box {
    background-color: #c00000;
    position: sticky;
    z-index: 999;
  }

  .search-list {
    padding: 0 5px;

    .search-item {
      display: flex;
      //两边
      justify-content: space-between;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #efefef;

      .goods_name {
        //文字不能换行
        white-space: nowrap;
        //超出的区域隐藏
        overflow: hidden;
        font-size: 13px;
        //溢出部分用省略号代替
        text-overflow: ellipsis;
        margin-right: 3px;
      }
    }
  }

  .search-history {
    margin: 0 5px;

    .histroy-title {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #efefef;

      & text {
        font-size: 13px;
      }
    }

    .history-body {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;

      .uni-tag {
        margin: 5px 5px;
        color: black;
      }
    }
  }
</style>
